<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> 
<head>
<%@ include file="/WEB-INF/jsp/include/easyui.jsp" %>
<%@ include file="/WEB-INF/jsp/include/pGrid.jsp" %>
<%@ include file="/WEB-INF/jsp/include/pForm.jsp" %>
<title>菜单动作配置</title>
<script type="text/javascript" src="${path}/plug-in/jquery-easyui-1.5.1/plugins/datagrid-cellediting.js"></script>
<script>
	$(function(){
		/*添加提交前事件*/
		fn.onBeforeSubmitForm = function(){
			p.dataGrid.datagrid("acceptChanges");
			var motionJsonArray = "[]"; 
			var rows = p.dataGrid.datagrid("getChecked") || [];
			motionJsonArray = JSON.stringify(rows)
			$("input[name=motionJsonArray]").val(motionJsonArray);
			
		};
		fn.onAfterResetForm = function(){
			var data = this.data;
			$("input[name=menuId]").val(data.id);
		};
		fn.resetForm();
		
		/*列表初始化*/
		var gridParam = {"columns":[[
              {"field":"id",checkbox:true},
              {"field":"motionCode","width":80,"title":"动作编码"},
              {"field":"motionName","width":80,"title":"动作名称",editor:{
	     			type:'text'
	     	  }},
              {"field":"motionIcon_","width":80,"title":"动作预览",formatter: function(value,row,index){
            	  return '<span class="l-btn-left l-btn-icon-left"><span class="l-btn-text">'+ row.motionName  +'</span><span class="l-btn-icon '+ row.motionIcon  +'">&nbsp;</span></span>';
              }},
              {"field":"motionOrder","width":80,"title":"动作排序",editor:{
	     			type:'numberbox',options:{precision:0}
	     	  }}
		 	]],
		 	queryParams:{ menuId: fn.data.id },
		 	url:"/console/menu/menuMotionList",
		 	selectOnCheck:false,
		 	checkOnSelect:false,
		 	pagination: false,
		 	singleSelect: false, 
		 	onLoadSuccess:function(data){
                $.each(data.rows,function(idx,val){
	                if(val.isChecked) p.dataGrid.datagrid("checkRow", idx);
                });   
		 	},
		 	idField: "id"
		};
		p.dataGrid = $(p.dataGrid).datagrid( $.extend({}, p.dataGridParam, gridParam)).datagrid('enableCellEditing');
		
		$("#toolbar a").on("click", function() {
			var id = $(this).attr("id");
			switch(id){
				case "b_1":
					p.dataGrid.datagrid("clearChecked");
					p.dataGrid.datagrid("checkRow",0);
					p.dataGrid.datagrid("checkRow",1);
					p.dataGrid.datagrid("checkRow",2);
					p.dataGrid.datagrid("checkRow",3);
					p.dataGrid.datagrid("checkRow",4);
					return;
					break;
				case "b_2":
					p.dataGrid.datagrid("clearChecked");
					break;
				case "b_3":
					p.dataGrid.datagrid("clearChecked");
					p.dataGrid.datagrid("reload");
					break;
				default:break;
			}
		});
	});
</script>
<style type="text/css">
	#toolbar a{text-decoration: none;color: black;cursor: pointer;}
</style>
</head>
<body>
	<div class="easyui-panel" data-options="fit:true,border:false" style="padding:10px;">
		<form id="easyuiForm" method="post" action="/console/menu/menuMotionConfig"  style="display: none;" >
		 <!--类名属性及默认主键id-->
		 <input type="hidden" name="menuId" value="" />
		 <input type="hidden" name="motionJsonArray" value="[]" />
		</form>
	
		<div id="toolbar" class="easyui-panel" style="padding:3px;">
			&nbsp;<a href="javascript:void(0)" id="b_1">选择常用</a>&nbsp;&nbsp;
			<a href="javascript:void(0)" id="b_3">历史选择</a>&nbsp;&nbsp;
			<a href="javascript:void(0)" id="b_2">取消</a>&nbsp;&nbsp;
		</div>
		<table id="dataGrid"></table>
	</div>
</body>
</html>